<template>
  <div>
    <template>
      <!-- 添加和修改课时表单 -->
      <el-dialog :visible="dialogVisible" title="添加课时" @close="close()">
        <el-form :model="video" label-width="120px">
          <el-form-item label="课时标题">
            <el-input v-model="video.title"/>
          </el-form-item>
          <el-form-item label="课时排序">
            <el-input-number v-model="video.sort" :min="0" />
          </el-form-item>
          <el-form-item label="是否免费">
            <el-radio-group v-model="video.free">
              <el-radio :label="true">免费</el-radio>
              <el-radio :label="false">默认</el-radio>
            </el-radio-group>
          </el-form-item>

          <!-- 上传视频 -->
          <el-form-item label="上传视频">
            <el-upload
              ref="upload"
              :auto-upload="false"
              :on-success="handleUploadSuccess"
              :on-error="handleUploadError"
              :on-exceed="handleUploadExceed"
              :file-list="fileList"
              :limit="1"
              action="http://127.0.0.1:8130/admin/vod/media/upload">
              <el-button slot="trigger" size="small" type="primary">选择视频</el-button>
              <el-button
                :disabled="uploadBtnDisabled"
                style="margin-left: 10px;"
                size="small"
                type="success"
                @click="submitUpload()">上传</el-button>
            </el-upload>
          </el-form-item>
        </el-form>

        <div slot="footer" class="dialog-footer">
          <el-button @click="close()">取 消</el-button>
          <el-button type="primary" @click="saveOrUpdate()">确 定</el-button>
        </div>
      </el-dialog>
    </template>
  </div>
</template>
<script>
import videoApi from '@/api/video'
export default {

  data() {
    return {
      fileList: [], // 上传文件列表
      uploadBtnDisabled: false,
      dialogVisible: false,
      video: {
        sort: 0,
        free: false
      }
    }
  },

  methods: {
    open(chapterId, videoId) {
      this.dialogVisible = true
      this.video.chapterId = chapterId
      if (videoId) {
        videoApi.getById(videoId).then(res => {
          this.video = res.data.item
          // 回显
          if (this.video.videoOriginalName) {
            this.fileList = [{ 'name': this.video.videoOriginalName }]
          }
        })
      }
    },
    close() {
      this.dialogVisible = false
    },
    saveOrUpdate() {
      if (!this.video.id) {
        this.save()
      } else {
        this.update()
      }
    },
    save() {
      this.video.courseId = this.$parent.$parent.courseId
      videoApi.save(this.video).then(res => {
        this.$message.success(res.message)
        this.dialogVisible = false
        this.resetForm()
        // 刷新列表
        this.$parent.getChapters()
      })
    },
    update() {
      console.log(this.video.id)
      videoApi.update(this.video).then(res => {
        this.$message.success(res.message)
        this.dialogVisible = false
        this.resetForm()
        // 刷新列表
        this.$parent.getChapters()
      })
    },
    resetForm() {
      this.video = {
        sort: 0
      }
      this.fileList = [] // 重置上传列表
    },

    handleUploadExceed() {
      this.$message.warning('不能够重复上传视频')
    },
    submitUpload() {
      this.uploadBtnDisabled = true
      this.$refs.upload.submit() // 提交上传请求
    },
    // 视频上传成功的回调
    handleUploadSuccess(response, file, fileList) {
      this.uploadBtnDisabled = false
      if (response.success) {
        this.video.videoSourceId = response.data.videoId
        this.video.videoOriginalName = file.name
      } else {
        this.$message.error('上传失败1')
      }
    },
    // 失败回调
    handleUploadError() {
      this.uploadBtnDisabled = false
      this.$message.error('上传失败2')
    }
  }
}
</script>
